<template>
	<view class="qh-sort-check flex-cn" @click.stop="changeSort">
		<slot></slot>
		<view class="flex-col-cn-cn">
			<text class="qh-rt-single qh-rt-a-zu4411 qh-sort-check__icon" :class="{'checked': value === upValue}" :style="iconStyle"></text>
			<text class="qh-rt-single qh-rt-a-zu44101 qh-sort-check__icon" :class="{'checked': value === downValue}" :style="iconStyle"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "qh-sort-check",
		props: {
			value: {
				type: [Number, String],
			},
			size: {
				type: [Number, String],
				default: '',
			},
			upValue: {
				type: [Number, String, Boolean],
				default: 1,
			},
			downValue: {
				type: [Number, String, Boolean],
				default: 2,
			},
		},
		emits: ['input', 'change'],
		computed: {
			iconStyle() {
				let str = this.$getUnitSize(this.size);
				return 'font-size:' + str + ';line-height:' + str;
			},
		},
		methods: {
			changeSort() {
				let data = this.value !== this.upValue ? this.upValue : this.downValue;
				this.$emit('input', data);
				this.$emit('change', data);
			},
		},
	}
</script>

<style lang="scss">
	.qh-sort-check {
		.qh-sort-check__icon {
			font-size: 14rpx;
			color: #999999;
			padding: 0 6rpx;
			line-height: 14rpx;

			&.checked {
				color: var(--primary-color);
			}
		}
	}
</style>
